ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    background-color: lightgray;
//    border: 10px solid #555;
	float: left;
}

li a {
    display: block;
    color: #000;
    padding: 77px 160px
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: darkgray;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}



body {
    position:absolute;
    width:100%
    padding: 10px;
    border-width: 20px;
    border-style: solid;
    border-color: lightsteelblue;
    margin: 2%;
    font-size: 100%;
}

body {
background-color: lightgray;

}
p, h1, h2 {
    color: black;
    text-align: left;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    max-width: 800px;
    margin: auto;

}

h1 {
    font-size: 40px;
    padding-left: 30px;
}

h2 {
    padding-left: 30px;
    text-align: left;
    font-size: 30px;
}

p {
    padding-left: 30px;
    font-size: 1.7em;
}

p::first-letter {
    font-size: 1.8em;
}

/* unvisited link */
a:link {
    color: blue;
}

/* visited link */
a:visited {
    color: darkblue;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: darkblue;
}


img {
    float: left;
    margin: 10px;
}
div.img {
	float: left;
    margin: 20px;
    height: 300px;
}	

div.img:hover {
}

div.img img {
    width: auto;
    height: 100%;
}

div.desc {
    padding: 15px;
    text-align: center;
}





canvas {
	float: left;
}

/* pi(e) animation */
  /* initial state */
#bg_pie {
	float: left;
    position: relative;
    height: 300px;
    width: 326px;
    background: lightgray url(ppie.png);
    color: #fff;
}


.pi {
	float: left;
	position: relative;
 //   border: 2px solid green;
    top: 68px;
    left: 90px;
    width: 270px;
    height: 270px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 14s linear infinite;
    -moz-animation:spin 14s linear infinite;
    animation:spin 14s linear infinite;

}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }